<template>
  <view class="loginPage">
    <view class="bg-top bg"></view>
    <view class="bg-bottom bg"></view>

    <view class="loginTop"></view>
    <view class="loginBox">
      <view class="loginForm">
        <uni-forms
          :modelValue="form"
          label-position="left"
          ref="loginForm"
          :rules="rules"
          :label-width="0"
        >
          <uni-forms-item name="nickName">
            <uni-easyinput
              prefixIcon="person"
              trim
              type="text"
              v-model="form.nickName"
              placeholder="请输入姓名"
            />
          </uni-forms-item>
          <uni-forms-item name="password">
            <uni-easyinput
              prefixIcon="locked"
              trim
              type="password"
              v-model="form.password"
              placeholder="请输入密码"
            />
          </uni-forms-item>
        </uni-forms>
      </view>

      <button @getuserinfo="getInfo" class="loginBtn" open-type="getUserInfo">登 录</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { pathToBase64 } from 'image-tools'
import bg from '@/static/cs/login/bg.jpg'
const { proxy }: any = getCurrentInstance()
// const bgStyle = reactive({ backgroundImage: '' })
const bgUrl = ref('')

const goBack = () => {
  proxy.$zq.goBack()
}

const getUrl = () => {
  pathToBase64(bg).then((base64: string) => {
    bgUrl.value = `url(${base64})`
  })
}

onLoad(() => {
  getUrl()
})
const form: AnyObject = reactive({})
const rules = reactive({
  nickName: {
    rules: [
      {
        required: true,
        errorMessage: '请输入姓名',
      },
      {
        minLength: 2,
        maxLength: 10,
      },
    ],
    label: '姓名',
  },
  password: {
    rules: [
      {
        required: true,
        errorMessage: '请输入密码',
      },
      { minLength: 4, maxLength: 12 },
    ],
    label: '密码',
  },
})

const doLogin = () => {
  proxy.$refs.loginForm
    .validate()
    .then((res: any) => {
      const userInfo = {
        ...res,
        avatarUrl:
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2F07%2Fc1%2Fa7%2F07c1a77e866128ec3f8f03c761c00633.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647677299&t=6c210f61c037ca08c3450d87f2b146dc',
      }
      useUserStore().setUserInfo(userInfo)
      goBack()
    })
    .catch((err: any) => {
      console.log(err)
    })
}

const getInfo = (val: any) => {
  console.log(1211)

  console.log(val)
}
</script>

<style lang="scss" scoped>
.loginPage {
  @apply relative w-screen h-screen overflow-hidden;
  .bg {
    // 微信小程序上的view是不支持直接使用静态背景图片的
    background-image: v-bind(bgUrl);
    // background-image: url('@/static/cs/login/bg.jpg');
    animation: move 40s linear infinite;
    background-size: 100% 100%;
    @apply relative w-screen h-screen -z-10;
  }
  @keyframes move {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(-100vh);
    }
  }
  .loginBox {
    height: 50%;
    @apply absolute w-full  left-0 bottom-0 bg-white rounded-t-2xl;
    .loginForm {
      @apply mx-5 mt-14 mb-8;
    }
    .loginBtn {
      @apply bg-green-500 mx-4 text-white;
    }
  }
}
</style>
